<div class="container-fluid" *ngIf="isConnectedToController()">
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-4">
        <app-dro></app-dro>
    </div>
    <div class="col-sm-6 col-md-7 col-lg-8">
      <app-tab-set>
        <app-tab title="Machine">
            <app-machine-control></app-machine-control>
        </app-tab>
        <app-tab title="Jog">
            <app-jog></app-jog>
        </app-tab>
        <app-tab title="Macros">
          <app-macros></app-macros>
        </app-tab>
        <app-tab title="Send file">
          <app-send-file></app-send-file>
        </app-tab>
        <app-tab title="Send commands">
          <app-send-commands></app-send-commands>
        </app-tab>
      </app-tab-set>
    </div>
  </div>
</div>

<div class="d-flex justify-content-center align-items-center" *ngIf="isConnectedToPendantAPI() && !isConnectedToController()">
  <div class="card col-sm-10 col-md-6">
    <div class="card-body">
      <h5 class="card-title">Connect to controller</h5>
      <app-connect></app-connect>
    </div>
  </div>
</div>

<div class="d-flex justify-content-center align-items-center" *ngIf="!isConnectedToPendantAPI()">
  <div class="card col-sm-10 col-md-6">
    <div class="card-body">
      <div class="row align-items-center">
        <div class="col">
          Waiting for the UGS Pendant server to become available...
        </div>
        <div class="col-2">
          <div class="spinner-border text-info" role="status" aria-hidden="true"></div>
        </div>
      </div>
    </div>
  </div>
</div>
